/**
 * Stylesheet dedicated to the application footer structure. These style classes define the skeleton 
 * of the components and include CSS properties such as margin, padding, display type, dimensions 
 * and positioning. This idea is the one used by JQuery UI.
 * @author Clément HELIOU (clement.heliou@gmail.com)
 * @since 1.0
 */

/* Main styles */
footer {
	height: 240px;
}

/* Page footer content */
footer>.footerContent {	
	padding-top: 4px;
	text-align: center;
}

/* Footer categories */
footer>.footerContent .footerContentCategories {
	margin-top: 6px;
}

/* Single footer category */
footer>.footerContent .footerContentCategories .footerContentCategory {
	display: inline-block;
	margin: 6px 0px 0 36px;
	max-width: 20%;
	vertical-align: top;
}

/* Single footer category header */
footer>.footerContent .footerContentCategories .footerContentCategory>.footerContentCategoryHeader {
	margin-bottom: 6px;
}

/* Item of a single footer category */
footer>.footerContent .footerContentCategories .footerContentCategory div{
	text-align: left;
}

/* Item of a single footer category except the header one */
footer>.footerContent .footerContentCategories .footerContentCategory div:not(.footerContentCategoryHeader){
	margin-top: 2px;
}

footer>.footerContent .footerContentCategories .footerContentCategory div:not(.footerContentCategoryHeader):before{
	content: "#";
	margin-right: 4px;
}

/* Description line of the footer */
footer>.footerContent .footerDescriptionLine{
	margin: 0 auto 0 auto;
	width: 100%;
}

footer>.footerContent .footerDescriptionLine>div{
	display: table-cell;
	vertical-align: middle;
}

/* Description text of the description line */
footer>.footerContent .footerDescriptionLine>div:first-child{
	height: 70px;
	padding: 0 18px 0 78px;
	text-align: justify;
}
